<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>D3交互式数据可视化</title>
	<style>
		.tooltip{
			position: absolute;
			width: 120px;
			height: auto;
			font-family: simsun;
			font-size: 14px;
			text-align: center;
			color: #fff;
			border-radius: 5px;
			border: 2px solid black;
			background: black;
		}
		.tooltip:after{
			content: "";
			position: absolute;
			bottom:100%;
			left: 20%;
			margin-left: -8px;
			width: 0;
			height: 0;
			border-bottom: 12px solid #000000;
			border-right: 12px solid transparent;
			border-left: 12px solid transparent;
		}
	</style>
</head>
<body>
	<ul>
		<li>柱状图、散点图、折线图 - D3没有提供这三种图表的布局</li>
		<li>12个布局：饼状图-pie 力导向图-force 弦图-chord 树状图-tree 集群图-cluster 捆图-bundle 打包图-pack 直方图-histogram 分区图-partition 堆栈图-stack 矩阵数图-treemap 层级图-hierarchy</li>
		<li>布局的意义在于<strong>计算出方便绘图的数据</strong></li>
		<li>
			<h4>饼状图</h4>
			<li>d3.layout.pie()</li>
			<li>pie(values[,index])</li>
			<li>pie.value([accessor])</li>
			<li>pie.sort([comparator])</li>
			<li>pie.startAngle([angle])</li>
			<li>pie.endAngle([angle])</li>
		</li>
	</ul>
	<div class="pie">
		
	</div>
	<script src="js/d3_3.5.7.js"></script>
	<script>
		var width = 400;
		var height = 400
		var svg = d3.select(".pie").append('svg').attr({"width":width,"height":height});
		var dataset = [["小米",60.8],["三星",58.4],["联想",47.3],["苹果",46.6],["华为",41.3],["酷派",40.1],["其他",111.5]];
		var pie = d3.layout.pie()
					.value(function(d) {
						return d[1]
					})
		//处理数据
		var pieData = pie(dataset);
//		console.log(pieData)
		
		//弧生成器
		var outerRadius = width / 3;
		var innerRadius = 0;
		
		var arc = d3.svg.arc()
					.innerRadius(innerRadius)
					.outerRadius(outerRadius);
		
		var color = d3.scale.category20();
		
		var arcs = svg.selectAll("g")
					.data(pieData)
					.enter()
					.append("g")
					.attr("transform","translate(" + (width / 2) + "," + (height / 2) +")");
					
		arcs.append("path")
			.attr("fill",function(d,i) {
				return color(i);
			})
			.attr("d",function(d) {
//				console.log(arc(d))
				return arc(d);
			})
		
		arcs.append("text")
			.attr("transform",function(d) {
				var x = arc.centroid(d)[0] * 1.4;
				var y = arc.centroid(d)[1] * 1.4;
				return "translate(" + x +"," + y + ")";
			})
			.attr("text-anchor","middle")
			.text(function(d) {
				var percent = Number(d.value) / d3.sum(dataset,function(d) {
					return d[1];
				}) * 100;
				return percent.toFixed(1) + "%";
			})
		
		arcs.append("line")
			.attr("stroke","black")
			.attr("x1",function(d) {
				return arc.centroid(d)[0] * 2;
			})
			.attr("y1",function(d) {
				return arc.centroid(d)[1] * 2;
			})
			.attr("x2",function(d) {
				return arc.centroid(d)[0] * 2.2;
			})
			.attr("y2",function(d) {
				return arc.centroid(d)[1] * 2.2;
			})
		
		arcs.append("text")
			.attr("transform",function(d) {
				var x = arc.centroid(d)[0] * 2.5;
				var y = arc.centroid(d)[1] * 2.5;
				return "translate(" + x +"," + y + ")";
			})
			.attr("text-anchor","middle")
			.text(function(d) {
				return d.data[0]
			})
		
		var tooltip = d3.select("body").append("div").attr("class","tooltip").style("opacity",0.0);
		
		arcs.on("mouseover",function(d,i) {
			tooltip.html(d.data[0] + "的出货量为" + "<br/>" + d.data[1] + "百万台")
					.style("left",(d3.event.pageX) + "px")
					.style("top",(d3.event.pageY + 20) + "px")
					.style("opacity",1.0)
					.style("box-shadow","10px 0px 0px" + color(i))
			
		})
		.on("mousemove",function(d) {
			tooltip.style("left",(d3.event.pageX) + "px")
					.style("top",(d3.event.pageY + 20) + "px")
		})	
		.on("mouseout",function(d) {
			tooltip.style("opacity",0.0)
		})
					
	</script>
</body>
</html>